<template>
  <div class="banxin2">
    <div class="left">
      <ul>
        <h3 class="l-title">{{ rankingList.artistToplist.name }}</h3>
        <li v-for="item,index1 in rankingList.list"
            :key="item.id"
            @click="doDetail(index1,item.id)"
            :class="{active:index1==index}">
          <img :src="item.coverImgUrl"
               alt="">
          <div class="l-half">
            <section>{{ item.name }}</section>
            <p>{{ item.updateFrequency }}</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="right">
      <div class="r-top">
        <section class="image">
          <img :src="rankingDetail.coverImgUrl"
               alt="">
        </section>
        <div class="r-top-right">
          <h3>{{ rankingDetail.name }}</h3>
          <section><i class="bg"></i>最近更新：{{ rankingDetail.updateTime|timeFilter }}（刚刚更新）</section>
          <div class="r-top-last">
            <a href="javascript:void(0)"
               class="bg2">播放</a>
            <a href="javascript:void(0)"
               class="bg2">{{ rankingDetail.subscribedCount }}</a>
            <a href="javascript:void(0)"
               class="bg2">{{ rankingDetail.shareCount }}</a>
            <a href="javascript:void(0)"
               class="bg2">下载</a>
            <a href="javascript:void(0)"
               class="bg2">{{ rankingDetail.commentCount }}</a>
          </div>
        </div>
      </div>
      <div class="r-bottom">
        <el-table stripe
                  lazy
                  :data="rankingDetail.tracks"
                  @row-click="rowClick"
                  :row-style="{cursor:'pointer'}">
          <el-table-column type="index"
                           label="">
            <template slot-scope="scope">
              {{ scope.$index+1 }}
            </template>
          </el-table-column>
          <el-table-column prop="name"
                           label="标题"
                           width="200">
            <template slot-scope="scope">
              <img :src="scope.row.picUrl"
                   alt=""
                   width="50"
                   height="50"
                   style="margin-right:10px;vertical-align:middle"
                   v-show="scope.$index<3">
              <span style="display:inline-block;width: calc(100% - 60px);"
                    class="elli">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="dt"
                           label="时长">
            <template slot-scope="scope">
              {{ scope.row.dt | timeMinute }}
            </template>
          </el-table-column>
          <el-table-column prop="ar"
                           label="歌手">
            <template slot-scope="scope">
              <span v-for="item,index in scope.row.ar"
                    :key="index">
                {{ item.name }}/
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { goDetail, topList } from '@/assets/js/request'
import { mapMutations } from 'vuex'
export default {
  created() {
    new Promise((resolve, reject) => {
      topList().then((res) => {
        let list = []
        res.list.forEach((item) => {
          let { id, name, coverImgUrl, updateFrequency } = { ...item }
          list.push({ id, name, coverImgUrl, updateFrequency })
        })
        this.rankingList = { artistToplist: res.artistToplist, list }
        resolve()
      })
    })
      .then(() => {
        this.doDetail(0, this.rankingList.list[0].id)
      })
      .then(() => {
        this.index = 0
      })
  },
  filters: {
    timeFilter(time) {
      time = new Date(time)
      let month = time.getMonth() + 1
      let day = time.getDate()
      month = month > 9 ? month : '0' + month
      day = day < 10 ? '0' + day : day
      return month + '月' + day + '日'
    },
    timeMinute(param) {
      let time = Math.round(param / 1000)
      let minute = Math.floor(time / 60)
      let second = time - minute * 60
      if (minute == 0 || minute < 10) {
        minute = '0' + minute
      }
      if (second == 0 || second < 10) {
        second = '0' + second
      }
      return minute + ':' + second
    },
  },
  data() {
    return {
      rankingList: {
        artistToplist: { coverUrl: '', name: '', updateFrequency: '' },
        list: [{ id: null, name: '', coverImgUrl: '', updateFrequency: '' }],
      },
      rankingDetail: {
        name: '',
        coverImgUrl: '',
        commentCount: 0,
        subscribedCount: 0,
        shareCount: 0,
        tracks: [{ id: 0, name: '', picUrl: '', dt: 0, ar: [{ name: '' }] }],
      },
      //点击排行榜的索引
      index: 1,
    }
  },
  methods: {
    ...mapMutations('song', ['songListChange']),
    doDetail(index, id) {
      //重复点击
      if (this.index == index) return
      //反之请求详情
      goDetail({ id }).then((res) => {
        let {
          name,
          coverImgUrl,
          commentCount,
          subscribedCount,
          shareCount,
          updateTime,
        } = {
          ...res.playlist,
        }
        if (res.playlist.tracks.length > 100) {
          res.playlist.tracks.splice(
            res.playlist.tracks.length - 1,
            res.playlist.tracks.length
          )
        }
        let tracks = res.playlist.tracks.map((item) => {
          let { id, name, picUrl, dt, ar } = {
            id: item.id,
            name: item.al.name,
            picUrl: item.al.picUrl,
            ar: item.ar,
            dt: item.dt,
          }
          return { id, name, picUrl, dt, ar }
        })
        this.rankingDetail = {
          name,
          coverImgUrl,
          commentCount,
          subscribedCount,
          shareCount,
          updateTime,
          tracks,
        }
      })
    },
    //点击一行播放
    rowClick(row) {
      this.songListChange([row])
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/assets/css/base.less';
.bg {
  background: url(@/assets/image/icon.png) no-repeat 0 9999px;
}
.bg2 {
  background: url(@/assets/image/button2.png) no-repeat 0 9999px;
}
.elli {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banxin2 {
  &::after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: 0;
  }
  .left {
    float: left;
    width: 240px;
    border: 1px solid #ccc;
    border: 0 1px 0;
    box-sizing: border-box;
    ul {
      padding-top: 40px;
      text-align: left;
      h3 {
        text-indent: 5px;
        padding: 0 10px 12px 15px;
        font-size: 16px;
        color: #000;
      }
      li {
        background: #f4f2f2;
        padding: 10px 0 10px 20px;
        height: 42px;
        cursor: pointer;
        text-align: left;
        img {
          width: 40px;
          height: 40px;
        }
        .l-half {
          display: inline-block;
          margin-left: 10px;
          vertical-align: top;
          width: 150px;
          section {
            margin-top: 2px;
            margin-bottom: 8px;
            font-size: 14px;
          }
          p {
            font-size: 12px;
            color: #999;
          }
        }
        &:hover,
        .active {
          background-color: #e6e6e6;
        }
      }
      .active {
        background-color: #e6e6e6;
      }
    }
  }
  .right {
    width: 740px;
    padding: 40px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    float: right;
    text-align: left;
    .r-top {
      width: 660px;
      height: 155px;
      .image {
        width: 150px;
        height: 150px;
        padding: 5px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        display: inline-block;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .r-top-right {
        display: inline-block;
        padding-left: 50px;
        width: 460px;
        height: 155px;
        vertical-align: top;
        h3 {
          line-height: 24px;
          font-size: 20px;
          font-weight: normal;
          color: #000;
        }
        section {
          font-size: 12px;
          color: #333;
          margin-bottom: 20px;
          line-height: 31px;
          i {
            background-position: -18px -682px;
            width: 13px;
            height: 13px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
          }
        }
        .r-top-last {
          width: 100%;
          a {
            display: inline-block;
            height: 31px;
            padding-left: 28px;
            line-height: 31px;
            color: #333;
            font-size: 12px;
            margin-right: 5px;
            &:nth-child(1) {
              background-position: left -718px;
              color: #fff;
            }
            &:nth-child(2) {
              background-position: 0 -977px;
            }
            &:nth-child(3) {
              background-position: 0 -1225px;
            }
            &:nth-child(4) {
              background-position: 0 -2761px;
            }
            &:nth-child(5) {
              background-position: 0 -1465px;
            }
          }
        }
      }
    }
  }
}
</style>